import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, ScrollView, SectionList} from 'react-native';
import NavigationBar from "../../common/NavigationBar";
import {About_Tutorial, Menu_List} from '../../common/More_Menu'
import Ionicons from "react-native-vector-icons/Ionicons";

const THEME_COLOR = '#678';
const URL = 'https://coding.m.imooc.com/classindex.html?cid=89';

class MyPage extends Component {
  render() {

    // 顶部导航栏
    let navigationBar = <NavigationBar
      title={'我的'}
      style={{backgroundColor: THEME_COLOR}}
      statusBar={{hidden:true,backgroundColor:THEME_COLOR}}
    />;

    return (
      <View style={styles.container}>
        {navigationBar}

        {/*分组列表*/}
        <SectionList
          ListHeaderComponent={this.headerCom}
          sections={Menu_List}
          keyExtractor={(item, index) => index}
          renderItem={({item}) => this.renderItem(item)}
          renderSectionHeader={({section: {title}}) => this.sectionHeader(title)}
          ItemSeparatorComponent = {this.ItemLine}
        />
      </View>
    );
  }

  // 每个分组的title组件
  sectionHeader = (title) => {
    return <View style={styles.headerBox}>
      <Text style={styles.header}>{title}</Text>
    </View>
  };

  // 头部组件
  headerCom = () => {
    let {navigation} = this.props;
    return <View>
      {/* about一栏 */}
      <TouchableOpacity style={styles.aboutTutorialBox} onPress={()=>{navigation.push('AboutPage')}}>
        <View style={styles.aboutTutorialNameBox}>
          <Ionicons name={About_Tutorial.about.icon} size={40} color={'#000'} style={{marginRight: 10}}/>
          <Text>{About_Tutorial.about.name}</Text>
        </View>
        <Ionicons name={'ios-arrow-forward'} size={16} color={'#000'}/>
      </TouchableOpacity>

      {/* 教程一栏 */}
      <TouchableOpacity style={[styles.aboutTutorialBox,{borderBottomWidth: 0}]}
                        onPress={()=>{navigation.push('WebViewPage',{url:URL})}}
      >
        <View style={styles.aboutTutorialNameBox}>
          <Ionicons name={About_Tutorial.tutorial.icon} size={20} color={'#000'} style={{marginRight: 10}}/>
          <Text>{About_Tutorial.tutorial.name}</Text>
        </View>
        <Ionicons name={'ios-arrow-forward'} size={16} color={'#000'}/>
      </TouchableOpacity>
    </View>
  };

  // 每一个item
  renderItem = (item) => {
    return <TouchableOpacity style={styles.itemBox} onPress={()=>{this.goCustomLanguage(item)}}>
      <View style={styles.itemNameBox}>
        <item.Icons name={item.icon} size={20} color={THEME_COLOR} style={{marginRight: 10}}/>
        <Text>{item.name}</Text>
      </View>
      <Ionicons name={'ios-arrow-forward'} size={16} color={'#000'}/>
    </TouchableOpacity>
  };

  // 跳转到其他页面去
  goCustomLanguage = (item) => {
    let {navigation} = this.props;
    if (item.name === '自定义语言') {
      navigation.push('CustomLanguage')
    }
    if (item.name === '语言排序') {
      navigation.push('LanguageSortable')
    }
  };

  // 每个item组件之间的横线
  ItemLine = () => {
    return <View style={{borderBottomWidth: 1,borderColor: '#eee'}}/>
  };

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  aboutTutorialBox: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#fff',
    padding: 20,
    borderBottomWidth: 1,
    borderColor: '#eee'
  },
  aboutTutorialNameBox: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerBox: {
    padding: 20,
    paddingTop: 10,
    paddingBottom: 10,
    justifyContent: 'center',
    backgroundColor: '#e2e2e2',
  },
  header: {
    color: '#494949',
    fontSize: 12,
  },
  itemBox:{
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'space-between',
    padding: 20,
  },
  itemNameBox:{
    flexDirection:'row',
    justifyContent:'center',
  }
});

export default MyPage;